<template>
  <div class="login-container">
    <vue-particles color="#EEEEEE" shapeType="star" :backgroundColor="'#19283d'"></vue-particles>
    <transition name="el-zoom-in-center">
      <!--      登录卡片-->
      <div v-show="isLogin" class="w-100pp h-100vh flex-container flex-col flex-col-center flex-row-center">
        <div class="loginBox flex-container flex-col flex-row-between">
          <div class="w-100pp txt-gray-5 txt-1_5em txt-center">我们的快乐源泉</div>
          <div class="w-100pp">
            <el-form ref="userFormRef" :model="userForm">
              <el-form-item prop="username" :rules="formRule.required">
                <el-input type="text" class="input-item" placeholder="用户名" v-model="userForm.username">
                  <template #prefix>
                    <el-icon :color="'#5988ba'" class="el-input__icon"><UserFilled /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password" :rules="formRule.required">
                <el-input type="password" class="input-item" placeholder="密码" v-model="userForm.password">
                  <template #prefix>
                    <el-icon :color="'#5988ba'" class="el-input__icon"><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <span class="txt-0_5em txt-gray-7">没有账号。<span class="txt-blue-7 hand" @click="isLogin = false">立即注册</span></span>
          </div>
          <div class="w-8em">
            <button class="btn hand" @click="userLogin">
              登录
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <!--      注册卡片-->
      <div v-show="!isLogin" class="w-100pp h-100vh flex-container flex-col flex-col-center flex-row-center" style="overflow: hidden">
        <div class="loginBox flex-container flex-col flex-row-between">
          <div class="w-100pp txt-gray-5 txt-1_5em txt-center">欢迎加入我们</div>
          <div class="w-100pp">
            <el-form ref="userRegisterFormRef" :model="userRegisterForm">
              <el-form-item prop="username" :rules="formRule.required">
                <el-input type="text" class="input-item" placeholder="用户名" v-model="userRegisterForm.username">
                  <template #prefix>
                    <el-icon :color="'#5988ba'" class="el-input__icon"><UserFilled /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password" :rules="formRule.required">
                <el-input type="password" class="input-item" placeholder="密码" v-model="userRegisterForm.password">
                  <template #prefix>
                    <el-icon :color="'#5988ba'" class="el-input__icon"><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwdRepeat" :rules="formRule.required">
                <el-input type="password" class="input-item" placeholder="再次输入密码" v-model="userRegisterForm.pwdRepeat">
                  <template #prefix>
                    <el-icon :color="'#5988ba'" class="el-input__icon"><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="gender" :rules="formRule.required">
                <el-radio-group v-model="userRegisterForm.gender">
                  <el-radio :label="0">男</el-radio>
                  <el-radio :label="1">女</el-radio>
                  <el-radio :label="2">未知</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <span class="txt-0_5em txt-gray-7">已有账号。<span class="txt-blue-7 hand" @click="isLogin = true">立即登录</span></span>
          </div>
          <div class="w-8em">
            <button class="btn hand" @click="userRegister">
              注册
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue'
import VueParticles from '@/components/VueParticles/index.vue'
import { formRule } from '@/utils/validate'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const isLogin = ref(true)

// 账号密码
const userForm = ref({
  username: '',
  password: ''
})
// 表单DOM
const userFormRef = ref()

import User from '@/api/sys/user'
import GlobalLoad from '@/utils/loading'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
// 登录
function userLogin() {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      GlobalLoad.show()
      let { code, result } = await User.login(userForm.value.username, userForm.value.password)
      GlobalLoad.hide()
      if (code === 200) {
        store.dispatch('login', result).then(() => {
          ElMessage.success('登录成功')
          router.push('/')
        })
      }
    }
  })
}

const userRegisterForm = ref({
  username: '',
  password: '',
  pwdRepeat: '',
  gender: 0
})
const userRegisterFormRef = ref()

// 用户注册
function userRegister() {
  userRegisterFormRef.value.validate((valid) => {
    if (valid) {
      GlobalLoad.show()
      User.register(userRegisterForm.value).then((res) => {
        GlobalLoad.hide()
        if (res.code === 200) {
          ElMessage.success('注册成功，赶紧登录看看吧！')
          isLogin.value = true
        }
      })
    }
  })
}
</script>
<style lang="scss" scoped>
/* 修复动画导致页面滚动条闪烁问题 */
.login-container {
  overflow: hidden;
  height: 100vh;
}

/* 表单卡片样式*/
.loginBox {
  width: 400px;
  height: 384px;
  background-color: #0c1622;
  border-radius: 10px;
  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.6);
  padding: 40px;
  box-sizing: border-box;
}

:deep(.input-item input) {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gray-6);
}

:deep(.input-item input::placeholder) {
  color: #6890ba;
}

button {
  background: transparent;
  border: 0;
  outline: none;
}

.btn {
  padding: 10px 20px;
  color: #03e9f4;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.btn:hover {
  border-radius: 5px;
  color: #fff;
  background: #03e9f4;
  box-shadow: 0 0 5px 0 #03e9f4, 0 0 25px 0 #03e9f4, 0 0 50px 0 #03e9f4, 0 0 100px 0 #03e9f4;
  transition: all 1s linear;
}

.btn > span {
  position: absolute;
}

.btn > span:nth-child(1) {
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(left, transparent, #03e9f4);
  left: -100%;
  top: 0;
  animation: line1 1s linear infinite;
}

@keyframes line1 {
  50%,
  100% {
    left: 100%;
  }
}

.btn > span:nth-child(2) {
  width: 2px;
  height: 100%;
  background: -webkit-linear-gradient(top, transparent, #03e9f4);
  right: 0;
  top: -100%;
  animation: line2 1s 0.25s linear infinite;
}

@keyframes line2 {
  50%,
  100% {
    top: 100%;
  }
}

.btn > span:nth-child(3) {
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(left, #03e9f4, transparent);
  left: 100%;
  bottom: 0;
  animation: line3 1s 0.75s linear infinite;
}

@keyframes line3 {
  50%,
  100% {
    left: -100%;
  }
}

.btn > span:nth-child(4) {
  width: 2px;
  height: 100%;
  background: -webkit-linear-gradient(top, transparent, #03e9f4);
  left: 0;
  top: 100%;
  animation: line4 1s 1s linear infinite;
}

@keyframes line4 {
  50%,
  100% {
    top: -100%;
  }
}
</style>
